<template>
  <div class="income-flow">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <el-row type="flex" align="middle" justify="space-between" class="header">
      <el-row type="flex">
        <el-select
          class="select"
          v-model="userScreenVal"
          placeholder="请选择"
          size="mini"
          @change="handleSelect"
        >
          <el-option label="全部" value="all"></el-option>
          <el-option label="本月" value="month"></el-option>
        </el-select>
        <el-select
          class="select"
          v-if="isTeacher == 1"
          v-model="teacherScreenVal"
          placeholder="请选择"
          size="mini"
          @change="handleSelect"
        >
          <el-option label="全部" value="all"></el-option>
          <el-option label="推广收益" value="user"></el-option>
          <el-option label="分成收益" value="teacher"></el-option>
        </el-select>
      </el-row>
      <div class="right">
        累计收入：<span>{{ balanceTotal }}</span>
      </div>
    </el-row>
    <el-table :data="tableData" size="mini" v-if="$util.isDef(tableData)">
      <el-table-column label="时间">
        <template slot-scope="scope">
          {{ scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>
      <el-table-column prop="num" label="金额">
        <template slot-scope="scope">
          {{ scope.row.num | formatMoney }}
        </template>
      </el-table-column>
      <el-table-column prop="alter_type" label="类型">
        <template slot-scope="scope">
          <!-- {{ alterType[scope.row.alter_type] }} -->
          {{ scope.row.alter_type ? '增加' : '扣除' }}
        </template>
      </el-table-column>
      <el-table-column prop="note" label="备注"></el-table-column>
    </el-table>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduPagination
  },
  data() {
    return {
      tabList: [
        {
          path: '/my/finance/my_income',
          title: '推广收入'
        },
        {
          path: '/my/finance/my_course',
          title: '推广课程'
        },
        {
          path: '/my/finance/my_user',
          title: '推广用户'
        }
      ],
      tableData: null,
      isTeacher: null,
      balanceTotal: 0,
      userScreenVal: null,
      teacherScreenVal: null,
      alterType: {
        0: '系统扣除',
        1: '系统增加',
        2: '冻结',
        3: '解冻',
        4: '冻结扣除',
        5: '分成收入',
        6: '分销收入',
        7: '分享收入',
        8: '收入提现',
        9: '提现失败',
        51: '机构分成',
        52: '讲师分成',
        53: '挂载分成',
        54: '分享分成',
        55: '一级分销分成',
        56: '二级分销分成'
      },
      routePath: this.$route.path
    }
  },
  mounted() {
    this.handleIncomeFlowList()
  },
  methods: {
    // 分页
    handleCurrentChange() {
      this.handleIncomeFlowList()
    },
    // 获取数据
    handleIncomeFlowList() {
      this.$api.getIncomeFlow(
        {
          page: this.$store.getters['paginate/page'],
          count: 20,
          time: this.userScreenVal,
          type: this.teacherScreenVal
        },
        res => {
          this.balanceTotal = res.data.total_income
          this.isTeacher = res.data.is_teacher
          this.tableData = res.data.flow.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 20,
            total: res.data.flow.total
          })
        }
      )
    },
    // 时间
    handleSelect() {
      this.handleIncomeFlowList()
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.income-flow {
  ::v-deep .el-table thead th {
    background-color: #f6f9ff;
  }
  .header {
    margin-bottom: 16px;
    .select {
      width: 100px;
      & + .select {
        margin-left: 20px;
      }
    }
    .right {
      font-size: 14px;
      color: $text-color-import;
      span {
        font-size: 16px;
        color: $text-color-price;
      }
    }
  }
}
</style>
